<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="itemQuery.title" placeholder="商品标题" />
      </el-form-item>

      <el-form-item>
        <el-select v-model="itemQuery.cid" clearable placeholder="商品类别">
          <el-option :value="1" label="饮料" />
          <el-option :value="2" label="零食" />
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getPageList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
    <el-table :data="itemList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品id">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品标题">
              <span>{{ props.row.title }}</span>
            </el-form-item>
            <el-form-item label="卖点">
              <span>{{ props.row.sellPoint }}</span>
            </el-form-item>
            <el-form-item label="价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品数量">
              <span>{{ props.row.num }}</span>
            </el-form-item>
            <el-form-item label="类目">
              <span>{{ props.row.cid===1?'饮料':'零食'}}</span>
            </el-form-item>
            <el-form-item label="状态">
              <span>{{ props.row.status===1?'正常':'下架' }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.created }}</span>
            </el-form-item>
            <el-form-item label="更新时间">
              <span>{{ props.row.updated }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="title"></el-table-column>
      <el-table-column label="数量" prop="num"></el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/item/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :current-page="page"
      :page-size="limit"
      :total="total"
      @current-change="getPageList"
    ></el-pagination>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import item from "@/api/item";
export default {
  data() {
    return {
      itemList: null,
      page: 1, //当前页
      limit: 2, //每页记录数
      total: 0, //总记录数
      itemQuery: {},
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    getList() {
      item.getList().then((response) => {
        this.itemList = response.data.itemList;
      });
    },
    getPageList(page = 1) {
      this.page = page;
      item
        .getPageList(this.page, this.limit, this.itemQuery)
        .then((response) => {
          //请求成功
          //response接口返回的数据
          //console.log(response)
          this.itemList = response.data.rows;
          this.total = response.data.total;
          //console.log(this.list)
          //console.log(this.total)
        });
    },
    removeDataById(id) {
      // item.deleteItem(id).then((response) => {
      //   this.getList();
      // });
      this.$confirm('此操作将永久删除该商品信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          item.deleteItem(id).then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getPageList();
          });
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },
    resetData() {
      this.itemQuery.title = "";
      this.itemQuery.cid = null;
    }
  }
};
</script>